<template>
    <div> <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>权限管理</el-breadcrumb-item>
  <el-breadcrumb-item>角色列表</el-breadcrumb-item>
</el-breadcrumb>
<el-card>
<el-row>
<el-col>
    <el-button type="primary" @click="addDialogVisible=true" ref="addruleForm">添加角色</el-button>
</el-col></el-row>
<!-- 角色列表 -->
    <el-table :data="rolelist" border stripe>
        <!-- 展开列 -->
 <el-table-column type="expand">
<template slot-scope="scope">
    <el-row v-for="(item1,i1) in scope.row.children" :key="item1.id" :class="['bdbot',i1===0 ? 'bdtop':'','venter']">
        <el-col :span="5" >
            <el-tag closable @close="romeright(scope.row,item1.id)">{{item1.authName}}
             <i class="el-icon-caret-right"></i>
            </el-tag></el-col>
        <el-col :span="19">
           <el-row v-for="(item2,i2) in item1.children" :key="item2.id" :class="[i2===0 ? '':'botop',,'venter']">
               <el-col :span="6">
                   <el-tag type="success" closable @close="romeright(scope.row,item2.id)"> {{item2.authName}}</el-tag>
                  <i class="el-icon-caret-right"></i>
               </el-col>
               <el-col :span="18">
                   <el-tag v-for="(item3) in item2.children" :key="item3.id" type="warning" closable @close="romeright(scope.row,item3.id)">
                       {{item3.authName}}
                         <i class="el-icon-caret-right"></i>
                   </el-tag>


               </el-col>
           </el-row>


        </el-col>
       
    </el-row>
   <pre>
       {{scope.row}}
   </pre>
   </template> </el-table-column>

    <el-table-column label="角色名称" prop="roleName"></el-table-column>
      <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
       <el-table-column label="操作" >
<template slot-scope="scope">
   <el-button type="primary" icon="el-icon-edit" size="mini" @click="checkgo(scope.row.id )">编辑</el-button>
     <el-button type="danger" icon="el-icon-delete" size="mini" @click="delrole(scope.row.id )">删除</el-button>
       <el-button type="warning" icon="el-icon-setting" size="mini" @click="showdailogright(scope.row)">分配权限</el-button></template>  
      </el-table-column>
    </el-table>

</el-card>
<el-dialog
  title="添加角色"
  :visible.sync="addDialogVisible"
  width="50%">
<el-form :model="addRole" :rules="addrules" ref="addruleForm" label-width="70px" >
  <el-form-item label="角色ID" prop="roleId">
    <el-input v-model=" addRole.roleId"></el-input>
  </el-form-item>
  <el-form-item label="角色名称" prop="roleName">
    <el-input v-model="addRole.roleName"></el-input>
  </el-form-item>
  <el-form-item label="角色描述" prop="roleDesc">
    <el-input v-model=" addRole.roleDesc"></el-input>
  </el-form-item> </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addrole">确 定</el-button>
  </span>
</el-dialog>
<!-- 
修改(编辑)用户数据  -->
<el-dialog
  title="修改角色"
  :visible.sync="editDialogVisible"
  width="50%"  >
<el-form :model="editform" :rules="editformRules" ref="editruleForm" label-width="70px" >
  <el-form-item label="角色ID" >
    <el-input v-model="editform.id" disabled></el-input>
  </el-form-item> </el-form>
  <el-form :model="editform" :rules="editformRules" ref="editruleForm" label-width="70px" >
  <el-form-item label="角色名称" prop="roleName">
    <el-input v-model="editform.roleName"></el-input>
  </el-form-item></el-form>
<el-form :model="editform" :rules="editformRules" ref="editruleForm" label-width="70px" >
  <el-form-item label="角色描述" prop="roleDesc">
    <el-input v-model="editform.roleDesc"></el-input>
  </el-form-item> </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editgo">确 定</el-button>
  </span>
</el-dialog>

<!-- 分配权限 -->
<el-dialog
  title="分配权限"
  :visible.sync="setrightdialogVisible"
  width="50%" @close="closedafult">
<el-tree :data="rightslist" :props="treeProps"   show-checkbox node-key="id" default-expand-all :default-checked-keys="dalaultkeys" ref="treeref"></el-tree>
  <span slot="footer" class="dialog-footer">
    <el-button @click="setrightdialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="alotrights">确 定</el-button>
  </span>
</el-dialog>
</div>
</template>


<script>
export default {
    data(){
      return {
             rolelist:[],
            addDialogVisible:false,
            setrightdialogVisible:false,
             addRole:{roleId:'',roleName:'',roleDesc:''},
            //  获取的所有权限数据
             rightslist:[],
             treeProps:{
               label:'authName',
               children:'children'
             }, 
             dalaultkeys:[],
             roleId:'',
        addrules:{
            roleId:[{required:true,message:"请输入ID",trigger:'blur'},
            {min:1,max:5,message:'请输入正确的ID',trigger:'blur'}],
           roleName:[{required:true,message:"请输入角色名称",trigger:'blur'},
            {min:3,max:6,message:'角色的长度在3-6个字符之间~',trigger:'blur'}],
            roleName:[{required:true,message:"角色描述",trigger:'blur'}],
        },
        editDialogVisible:false,
        editform:{},
         editformRules:{roleName:[{required:true,message:"请输入角色名称",trigger:'blur'}],
                  roleDesc:[{required:true,message:"请描述你的角色",trigger:'blur'}]},
      }
  },
  created(){
      this.getrolelist()
  },
  methods:{
  async  getrolelist(){
     const {data:res}=await this.$http.get('roles')
    if(res.meta.status!=200)
    {return this.$message.error("获取角色列表失败！");}
    this.rolelist=res.data
      },
     addrole(){
        this.$refs.addruleForm.validate(async valid=>{
       if(!valid) return
   const {data:res}=await this.$http.post('roles',this.addRole)
    if(res.meta.status!=201)
    {return this.$message.error("添加角色失败！");}
    this.$message.success("添加角色成功！")
    this.addDialogVisible=false;
    this.getrolelist();})
      },
//     editclose(){
//      this.$refs.addrulerole.resetFields()}, 

// 后台数据有误~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 async checkgo(id){
       const {data:res} =await this.$http.get('roles/'+id)
    if(res.meta.status!=200)
                    return this.$message.error("获取角色列表失败！！") ;
                  this.editform=res.data;
                 this.editDialogVisible=true

                },
   editgo(){
     this.$refs.editruleForm.validate(async valid=>{
      if(!valid) return
      const {data:res} =await this.$http.put('roles/'+this.editform.roleId,{roleName:this.editform.roleName,roleDesc:this.editform.roleDesc})
    if(res.meta.status!=200)
                    return this.$message.error("更新角色信息失败！");
                    this.$message.success("更新用角色信息成功！");
                 this.editDialogVisible=false;
                this.getrolelist()
              

   })
      },
   async delrole(id){
      const confiresult =await  this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
           if(confiresult!=='confirm') { return this.$message.info("已经取消删除！");}
               const {data:res} =await this.$http.delete('roles/'+id)
    if(res.meta.status!=200)
                  {  return this.$message.error("删除用户信息失败！");}
                this.$message.success("删除用户信息成功！")
                this.getrolelist()
                this.editdialogVisible=false

   },
      async  romeright(row,rightid){
       const dafults=  await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
           if(dafults!=='confirm') { return this.$message.info("已经取消删除！");}
               const {data:res} =await this.$http.delete(`roles/${row.id}/rights/${rightid}`)
    if(res.meta.status!=200)
                  {  return this.$message.error("删除权限失败失败！");}
                this.$message.success("删除用户信息成功！")
                row.children=res.data;

         },
        async showdailogright(role){
              this.roleId=role.id;
                const {data:res} =await this.$http.get('rights/tree')
    if(res.meta.status!=200)
                  {  return this.$message.error("获取权限失败失败！");}
               this.rightslist=res.data;
               this.getleftkeys(role,this.dalaultkeys);
            this.setrightdialogVisible=true;
         },
        getleftkeys(node,arr){
           if(!node.children) return arr.push(node.id)
           node.children.forEach(element =>
             this.getleftkeys(element,arr));
             
      },
         closedafult(){
             this.dalaultkeys=[]
         },
      async   alotrights(){
            const keys=[...this.$refs.treeref.getCheckedKeys(),
          ...this.$refs.treeref.getHalfCheckedKeys()  ];
          const idstr=keys.join(',');
           const {data:res} =await  this.$http.post(`roles/${this.roleId}/rights`,{rids:idstr})
            if(res.meta.status!=200)
                  {  return this.$message.error("分配权限失败！");}   
                   this.$message.success("分配权限成功！")
                       this.getrolelist()
                  this.setrightdialogVisible=false;


         },

      }
     

    
      
}

</script>


<style lang="less" scoped>
.el-tag{margin: 7px;}
.bdtop{border: 1px solid #eee;}
.bdbot{border-bottom: 1px solid #eee;}
.vcenter{display: flex;align-items: center;}
</style>